<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>仿微信聊天窗口</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  .clear{clear: both;}
  body{background: #000;}
  #box{width: 290px;height: 595px;margin: 20px auto;background:url(images/19.png);border-radius: 38px;position: relative;}
  #box_1{width: 260px;height: 465px;border: 2px solid #000;position: absolute;top: 65px;left: 13px;background: #fff;}
  #box_2{width: 250px;height: 409px;border-bottom: 1px solid #DED6E7;padding: 5px;overflow:auto;}
  #box_3{padding: 5px;background: #F7F7F7;position: relative;}
  #bd1{border: 1px solid #DED6E7;padding: 8px;border-radius: 10px;background: #fff;margin-right: 5px;}
  #bd2{width: 157px;height: 40px;border-radius: 8px;border: 1px solid #DED6E7;position: absolute;top:5px;outline: none;padding-left: 5px;display: inline-block;margin-right: 5px;}
  #bd3{float: right;width: 40px;height: 40px;border-radius: 8px;border:none;background: #F7F7F7;font-size: 14px;outline: none;background: #01D867;margin-right: -2px;}
  .img1{margin-right: 5px;float: left;line-height: 32px;}
  .first{background: #DED6E7;border-radius: 5px;padding: 5px;float: left;max-width: 190px;margin-bottom: 5px;}
  .img2{margin-left: 5px;float: right;}
  .second{background: #21C618;border-radius: 5px;padding: 5px;margin-bottom: 5px;display: inline-block;max-width: 190px;float: right;}
  </style>
</head>
<body>
  <div id="box">
    <div id="box_1">
      <div id="box_2">
        
      </div>
      <div id="box_3">
        <img id="bd1" src="images/20.png">
        <input id="bd2" type="text">
        <input id="bd3" type="button" value="发送">
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var dia = document.getElementById("box_2");
    var img1 = document.getElementById("bd1");
    var text1 = document.getElementById("bd2");
    var but1 = document.getElementById("bd3");
    var onoff = true;
    var str = "";
    img1.onclick = function(){
      if(onoff){
        img1.src = "images/21.png";
        onoff = false;
      }else{
         img1.src = "images/20.png";
         onoff = true;
      }
    }
    but1.onclick = function (){
      if(text1.value == ""){
          alert("请输入内容");
      }else{
          if(onoff){
           str = '<div><img class="img1" src="images/20.png"><div class="first">' +  text1.value + "</div></div><div class='clear'></div>";
            text1.value = "";
          }else{
            str = '<img class="img2" src="images/21.png"></div><div class="second">' + text1.value + '</div><br><div class="clear"></div>';
            text1.value = "";
          }
          dia.innerHTML = str + dia.innerHTML;
      }
    }
  </script>
</body>
</html>